<template>
  <el-dialog
    :title="`${form.id ? '修改' : '增加'}系统用户`"
    :visible.sync="visible"
    :close-on-click-modal="false"
    width="600px"
  >
    <el-form ref="form" :model="form" label-width="80px" style="padding-right: 32px;">
      <el-form-item
        prop="realName"
        label="姓名"
        :rules="[{required: true, message: ' ', trigger: 'submit'}]">
        <el-input v-model="form.realName"></el-input>
      </el-form-item>
      <el-form-item
        prop="roleId"
        label="角色"
        :rules="[{required: true, message: ' ', trigger: 'submit'}]"
      >
        <type-select
          v-model="form.roleId"
          :items="roles"
          valueField="id"
          textField="roleName"
          style="width: 100%"
        />
      </el-form-item>
      <el-form-item
        prop="username"
        label="用户名"
        :rules="[{required: true, message: ' ', trigger: 'submit'}]">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item
        v-if="!form.id"
        prop="passwd"
        label="密码"
        :rules="[{required: true, message: ' ', trigger: 'submit'}]">
        <el-input v-model="form.passwd" type="password" show-password></el-input>
      </el-form-item>
      <el-form-item v-if="!form.id" prop="status" label="启用账号">
        <el-switch
          v-model="form.status"
          :active-value="1"
          :inactive-value="0"
          :items="DictMan.items('enable')"
          style="width: 140px"
        />
      </el-form-item>
      <el-form-item
        v-if="!form.id"
        prop="orgIds"
        label="组织"
      >
        <org-check-tree
          v-if="form.roleId != 9"
          v-model="form.orgIds"
          :disabled="form.roleId == 1"
          style="width: 100%;"
        />
        <org-select
          v-else
          v-model="form.orgIds"
          :disabled="form.roleId == 1"
          style="width: 100%;"
        />
      </el-form-item>
      <el-form-item prop="phone" label="手机号码">
        <el-input v-model.trim="form.phone" clearable></el-input>
      </el-form-item>
      <el-form-item prop="email" label="邮箱地址">
        <el-input v-model.trim="form.email" clearable></el-input>
      </el-form-item>
      <el-form-item prop="imagePath" label="头像">
        <div class="avatar-upload-container">
          <el-avatar :src="form.imagePath || defaultAvatar" :size="80" style="margin-right: 16px;" />
          <el-upload
            action="/api/util/upload"
            accept="image/*"
            list-type="picture"
            :show-file-list="false"
            :on-success="onAvatarUploadSuccess"
          >
            <el-button icon="el-icon-upload2">更换头像</el-button>
          </el-upload>
        </div>
      </el-form-item>

      <el-form-item prop="remark" label="备注">
        <el-input
          v-model="form.remark"
          type="textarea"
          :rows="3"
        />
      </el-form-item>
    </el-form>
    <span slot="footer">
      <el-button type="primary" @click="onSubmit">确认</el-button>
      <el-button type="default" @click="visible = false">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import OrgCheckTree from '@/pages/org/OrgCheckTree';
import OrgSelect from '@/pages/org/OrgSelect';
import defaultAvatar from '@/assets/default-avatar.png';

export default {
  components: {
    OrgCheckTree,
    OrgSelect
  },
  data() {
    return {
      visible: false,
      form: {
        id: null,
        username: '',
        passwd: '',
        roleId: null,
        realName: '',
        phone: '',
        email: '',
        imagePath: '',
        status: 1
      },
      roles: [],
      defaultAvatar
    };
  },
  methods: {
    open(admin) {
      this.visible = true;
      this.$nextTick(() => {
        this.$refs.form.resetFields();
        if (admin) {
          Object.assign(this.form, admin);
        } else {
          this.form.id = null;
          this.form.status = 1;
        }
      });
      this.roles = this.$vnode.context.roles.filter(role => role.status == 1);
    },
    onAvatarUploadSuccess(response, file) {
      this.form.imagePath = response.data.url;
    },
    onSubmit() {
      this.$refs.form.validate(async (valid) => {
        if (!valid) return;
        const ret = await this.$http.post('/api/admin/saveAdmin', {...this.form, roleIds: this.form.roleId});
        if (ret.success) {
          this.visible = false;
          this.$vnode.context.$refs.table.reloadCurrentPage();
          this.$message.success(`${this.form.id ? '修改' : '增加'}成功`);

          if (this.form.id && this.form.id == app.admin.id) {
            Object.assign(app.admin, this.form);
          }
        }
      });
    }
  }
}
</script>

<style scoped>
.avatar-upload-container {
  display: flex;
  place-items: center;
}
</style>